<template>
    <view class="container">
        <swiper class="swiper" :touchable="false" :current="current" :circular="false" :indicator-dots="false"
            :autoplay="false" @change="sectionChange">
            <swiper-item>
                <scroll-view scroll-y class="content" style="height: 100%;">
                    <!-- 标题 -->
                    <view class="title">
                        <text>完善个人资料</text>
                        <text class="subtitle">帮助我们为您找到更合适的匹配</text>
                    </view>

                    <!-- 内容卡片 -->
                    <view class="card">
                        <view class="input-group">
                            <label class="input-label">邀请人<span class="required">*</span></label>
                            <input v-model="formData.inviteUserId" class="input" placeholder="请输入邀请人" type="text"
                                required />
                        </view>
                        <!-- 姓名 -->
                        <view class="input-group">
                            <label class="input-label">姓名<span class="required">*</span></label>
                            <input v-model="formData.name" class="input" placeholder="请输入姓名" type="text" required />
                        </view>

                        <!-- 电话 -->
                        <view class="input-group">
                            <label class="input-label">电话<span class="required">*</span></label>
                            <input v-model="formData.phone" class="input" placeholder="请输入电话" type="text" required
                                @input="validatePhone" />
                        </view>

                        <!-- 封面图片 -->
                        <!-- 封面图片 -->
                        <view class="image-upload">
                            <label class="input-label">封面图片<span class="required">*</span></label>
                            <view class="upload-box">
                                <!-- 循环显示多张封面图片 -->
                                <view class="image-row">
                                    <view v-for="(item, index) in formData.cover" :key="index" class="image-item">
                                        <image :src="item" class="cover-image" @click="previewImage(index)" />
                                        <view class="delete-icon" @click.stop="deleteImage(index)">删除</view>
                                    </view>

                                    <!-- 如果图片数量小于4，显示加号 -->
                                    <view v-if="formData.cover.length < 4" class="image-item add-image"
                                        @click="chooseImage">
                                        <text class="upload-text">+</text>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <!-- <view class="image-upload">
                            <label class="input-label">封面图片<span class="required">*</span></label>
                            <view class="upload-box" @click="chooseImage">
                                <image v-if="formData.cover" :src="formData.cover" class="cover-image" />
                                <text v-else class="upload-text">点击上传封面图片</text>
                            </view>
                        </view> -->

                        <!-- 性别 -->
                        <view class="input-group">
                            <label class="input-label">性别</label>
                            <view class="select-box" @click="chooseSex">
                                <text>{{ formData.sex === 1 ? '男' : '女' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>
                        <view class="input-group">
                            <label class="input-label">身高</label>
                            <input v-model="formData.height" class="input" placeholder="请输入身高" type="text" required />
                        </view>
                        <view class="input-group">
                            <label class="input-label">年龄</label>
                            <input v-model="formData.age" class="input" placeholder="请输入年龄" type="number" required />
                        </view>
                        <view class="input-group">
                            <label class="input-label">体重</label>
                            <input v-model="formData.weight" class="input" placeholder="请输入体重(kg)" type="number" required />
                        </view>
                        <!-- 出生日期 -->
                        <view class="input-group">
                            <label class="input-label">出生日期</label>
                            <view class="select-box" @click="chooseBirth(1)">
                                <text>{{ formData.birth || '请选择出生日期' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 职业 -->
                        <!-- <view class="input-group">
                            <label class="input-label">职业</label>
                            <view class="select-box" @click="chooseCareer(1)">
                                <text>{{ formData.career || '请选择职业' }}</text>
                            </view>
                        </view> -->
                        <view class="input-group">
                            <label class="input-label">职业</label>
                            <input v-model="formData.career" class="input" placeholder="请输入职业" type="text" required />
                        </view>

                        <!-- 学历 -->
                        <!-- <view class="input-group">
                            <label class="input-label">学历</label>
                            <view class="select-box" @click="chooseDegree(1)">
                                <text>{{ formData.degree || '请选择学历' }}</text>
                            </view>
                        </view> -->
                        <view class="input-group">
                            <label class="input-label">学历</label>
                            <view class="select-box" @click="showDegreePicker(1)"> <!-- 修改点击事件为调用显示picker的方法 -->
                                <text>{{ formData.degree || '请选择学历' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>


                        <!-- 身份证 -->
                        <view class="input-group">
                            <label class="input-label">身份证<span class="required">*</span></label>
                            <input v-model="formData.idCard" class="input" placeholder="请输入身份证号" type="text" required
                                @input="validateIdCard" />
                        </view>

                        <!-- 星座 -->
                        <view class="input-group">
                            <label class="input-label">星座</label>
                            <view class="select-box" @click="showZodiacPicker(1)"> <!-- 修改点击事件为调用显示picker的方法 -->
                                <text>{{ formData.zodiac || '请选择星座' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>
                        <!-- 车房情况 -->
                        <view class="input-group">
                            <label class="input-label">车房情况</label>
                            <view class="select-box" @click="chooseAsset">
                                <text>{{ formData.asset || '请选择车房情况' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 家庭成员 -->
                        <view class="input-group">
                            <label class="input-label">家庭成员</label>
                            <view class="select-box" @click="chooseFamily">
                                <text>{{ formData.family || '请选择家庭成员' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>
                        <!-- 婚史 -->
                        <view class="input-group">
                            <label class="input-label">婚史</label>
                            <view class="select-box" @click="chooseMarriage">
                                <text>{{ formData.marriage || '请选择婚史' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 子女情况 -->
                        <view class="input-group">
                            <label class="input-label">有无子女</label>
                            <view class="select-box" @click="chooseChilds">
                                <text>{{ formData.childs || '请选择是否有子女' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 犯罪记录史 -->
                        <view class="input-group">
                            <label class="input-label">犯罪记录史</label>
                            <view class="select-box" @click="chooseCriminal">
                                <text>{{ formData.criminal || '请选择犯罪记录史' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 个人描述 -->
                        <view class="input-group">
                            <label class="input-label">个人描述</label>
                            <textarea v-model="formData.description" class="input" placeholder="请输入个人描述" />
                        </view>

                        <!-- 地址选择 -->
                        <view class="input-group">
                            <label class="input-label">地址</label>
                            <view class="select-box" @click="chooseLocation(1)">
                                <text>{{ formData.address || '请选择省市区' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 月收入 -->
                        <view class="input-group">
                            <label class="input-label">月收入<span class="required">*</span></label>
                            <input v-model.number="formData.income" class="input" placeholder="请输入月收入" type="number"
                                required />
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>

            <!-- 择偶条件 -->
            <swiper-item>
                <button type="primary" style="background: #a55fee;" @click="last" size="mini">上一步</button>
                <scroll-view scroll-y class="content" style="height: 100%;">
                    <!-- 标题 -->
                    <view class="title">
                        <text>择偶条件</text>
                        <text class="subtitle">帮助我们为您找到更合适的匹配</text>
                    </view>

                    <!-- 内容卡片 -->
                    <view class="card">
                        <!-- 性别 -->
                        <view class="input-group">
                            <label class="input-label">性别</label>
                            <view class="select-box">
                                <text>{{ formData.sex === 1 ? '女' : '男' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 身高 -->
                        <view class="input-group">
                            <label class="input-label">最小身高</label>
                            <view class="select-box" @click="chooseHeight(1)">
                                <text>{{ formData.othInfo.height || '请选择身高' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <view class="input-group">
                            <label class="input-label">最大身高</label>
                            <view class="select-box" @click="chooseHeight(2)">
                                <text>{{ formData.othInfo.heightR || '请选择身高' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 出生日期 -->
                        <view class="input-group">
                            <label class="input-label">最低出生日期</label>
                            <view class="select-box" @click="chooseBirth(2)">
                                <text>{{ formData.othInfo.birth || '请选择出生日期' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 出生日期 -->
                        <view class="input-group">
                            <label class="input-label">最高出生日期</label>
                            <view class="select-box" @click="chooseBirth(3)">
                                <text>{{ formData.othInfo.birthR || '请选择出生日期' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 职业 -->
                        <!-- <view class="input-group">
                            <label class="input-label">职业</label>
                            <view class="select-box" @click="chooseCareer(2)">
                                <text>{{ formData.othInfo.career || '请选择职业' }}</text>
                            </view>
                        </view> -->
                        <view class="input-group">
                            <label class="input-label">职业</label>
                            <input v-model="formData.othInfo.career" class="input" placeholder="请输入职业" type="text" required />
                        </view>

                        <!-- 学历 -->
                        <!-- <view class="input-group">
                            <label class="input-label">学历</label>
                            <view class="select-box" @click="chooseDegree(2)">
                                <text>{{ formData.othInfo.degree || '请选择学历' }}</text>
                            </view>
                        </view> -->
                        <view class="input-group">
                            <label class="input-label">学历</label>
                            <view class="select-box" @click="showDegreePicker(2)"> <!-- 修改点击事件为调用显示picker的方法 -->
                                <text>{{ formData.othInfo.degree || '请选择学历' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>
                        <!-- 婚史 -->
                        <view class="input-group">
                            <label class="input-label">婚史</label>
                            <view class="select-box" @click="chooseOthMarriage">
                                <text>{{ formData.othInfo.marriage || '请选择婚史' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 车房情况 -->
                        <view class="input-group">
                            <label class="input-label">车房情况</label>
                            <view class="select-box" @click="chooseOthAsset">
                                <text>{{ formData.othInfo.asset || '请选择车房情况' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 有无小孩 -->
                        <view class="input-group">
                            <label class="input-label">有无小孩</label>
                            <view class="select-box" @click="chooseOthChilds">
                                <text>{{ formData.othInfo.childs || '请选择是否有小孩' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 星座 -->
                        <!-- <view class="input-group">
                            <label class="input-label">星座</label>
                            <view class="select-box" @click="chooseZodiac(2)">
                                <text>{{ formData.othInfo.zodiac || '请选择星座' }}</text>
                            </view>
                        </view> -->
                        <view class="input-group">
                            <label class="input-label">星座</label>
                            <view class="select-box" @click="showZodiacPicker(2)"> <!-- 修改点击事件为调用显示picker的方法 -->
                                <text>{{ formData.othInfo.zodiac || '请选择星座' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>



                        <!-- 地址选择 -->
                        <view class="input-group">
                            <label class="input-label">地址</label>
                            <view class="select-box" @click="chooseLocation(2)">
                                <text>{{ formData.othInfo.address || '请选择省市区' }}</text>
                                <tui-icon name="arrowdown" :size="24" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>

                        <!-- 月收入 -->
                        <view class="input-group">
                            <label class="input-label">最低月收入<span class="required">*</span></label>
                            <input v-model.number="formData.othInfo.income" class="input" placeholder="请输入月收入"
                                type="number" required />
                        </view>

                        <!-- 最高月收入 -->
                        <view class="input-group">
                            <label class="input-label">最高月收入<span class="required">*</span></label>
                            <input v-model.number="formData.othInfo.incomeR" class="input" placeholder="请输入月收入"
                                type="number" required />
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>

        <!-- 保存按钮 -->
        <view class="footer">
            <button class="save-button" @click="handleSave">{{ current == 0 ? '下一步' : '保存' }}</button>
        </view>

        <!-- 我的相册弹窗 -->
        <tui-drawer mode="right" :visible="picture" @close="picture = false">
            <view class="picture_box">
                <view class="picture_box_box">
                    <h2>添加更多生活照，获得更多曝光率</h2>
                    <p style="font-size: 13px;color: #606060;margin-top: 20px;">
                        一段美好的缘分需要一颗真诚的心，上传优质半身形象照片，展示更好的你，让对方更了解你，提升8倍曝光率和回复你的几率也会翻倍哦！</p>
                    <view class="uploading">
                        <tui-upload :value="value" :serverUrl="serverUrl" @complete="result"
                            @remove="remove"></tui-upload>
                    </view>
                    <!-- 底部固定保存按钮 -->
                    <view class="footer">
                        <button class="save-button" @click="picture = false">关闭</button>
                    </view>
                </view>
            </view>
        </tui-drawer>
        <!-- 添加picker组件用于个人资料星座选择 -->
        <tui-picker :show="showZodiacPicker1" :pickerData="zodiacOptions" @hide="hideZodiacPicker(1)"
            @change="handleZodiacChange($event,1)">
        </tui-picker>
        <!-- 添加picker组件用于择偶条件星座选择 -->
        <tui-picker :show="showZodiacPicker2" :pickerData="zodiacOptions" @hide="hideZodiacPicker(2)"
            @change="handleZodiacChange($event,2)">
        </tui-picker>
        <!-- 日期选择器 -->
        <tui-datetime :startYear="1950" ref="dateTime" :type="2" @confirm="onDateChange"></tui-datetime>
        <tui-datetime ref="dateTimeoth" :startYear="1950" :type="2" @confirm="onDateChangeothInfo"></tui-datetime>
        <tui-datetime ref="dateTimeothR" :startYear="1950" :type="2" @confirm="onDateChangeothInfoR"></tui-datetime>
        <!-- 添加picker组件用于个人资料学历选择 -->
        <tui-picker :show="showDegreePicker1" :pickerData="degreeOptions" @hide="hideDegreePicker(1)"
            @change="handleDegreeChange($event,1)">
        </tui-picker>

        <!-- 添加picker组件用于择偶条件学历选择 -->
        <tui-picker :show="showDegreePicker2" :pickerData="degreeOptions" @hide="hideDegreePicker(2)"
            @change="handleDegreeChange($event,2)">
        </tui-picker>
        <!-- 身高选择 -->
        <tui-picker :show="show" :pickerData="items__1" @hide="show = false" @change="change">
        </tui-picker>
        <tui-picker :show="showCareerPicker2" :pickerData="careerOptions" @hide="hideCareerPicker(2)"
            @change="handleCareerChange($event,2)">
        </tui-picker>
        <!-- 身高选择 -->
        <tui-picker :show="show2" :pickerData="items__1" @hide="show2 = false" @change="change2">
        </tui-picker>
        <tui-picker :show="showCareerPicker1" :pickerData="careerOptions" @hide="hideCareerPicker(1)"
            @change="handleCareerChange($event,1)">
        </tui-picker>
        <!-- 省市选择器 -->
        <tui-picker :show="show__2" :layer="2" :pickerData="items__2" :params="1" @hide="show__2 = false"
            @change="changee">
        </tui-picker>

        <!-- 择偶省市选择器 -->
        <tui-picker :show="show__3" :layer="2" :pickerData="items__2" :params="1" @hide="show__3 = false"
            @change="changeee">
        </tui-picker>
    </view>
</template>

<script>
    import cfg from '@/common/config.js'
    import { provinceCities } from '@/common/lib/util/city';
    export default {
        data() {
            return {
                showDegreePicker1: false, // 用于控制个人资料学历选择picker的显示隐藏，初始为隐藏
                showDegreePicker2: false, // 用于控制择偶条件学历选择picker的显示隐藏，初始为隐藏
                showCareerPicker1: false, // 新增，用于控制个人资料职业选择picker的显示隐藏，初始为隐藏
                showCareerPicker2: false, // 之前添加用于择偶条件职业选择picker显示隐藏的变量，保留
                provinceCities,
                // 我的相册弹窗控制
                picture: false,
                // 初始化图片
                value: [],
                current: 0,
                formData: {
                    asset: '', // 车房情况
                    family: '', // 家庭成员
                    marriage: '', // 婚史
                    childs: '', // 子女情况
                    criminal: '',// 犯罪记录史
                    height: '',
                    age: '',
                    weight: '',
                    inviteUserId: '',
                    name: '',
                    phone: '',
                    cover: [],
                    sex: 1,
                    birth: '',
                    career: '',
                    degree: '',
                    idCard: '',
                    zodiac: '',
                    description: '',
                    address: '',
                    income: '',
                    // 择偶条件
                    othInfo: {
                        sex: 2,
                        birth: "",
                        birthR: "",
                        career: "",
                        degree: "",
                        zodiac: "",
                        address: "",
                        income: '',
                        incomeR: '',
                        height: '',
                        heightR: '',
                        idcard: "",
                        description: "",
                        marriage: '', // 新增：婚史
                        asset: '', // 新增：车房情况
                        childs: '', // 新增：有无小孩
                    },
                },
                showDatePicker: true,
                show: false,
                show2: false,
                items__1: Array.from({ length: (190 - 150) / 5 + 1 },(_,i) => ({
                    text: `${150 + i * 5}cm`,
                    value: 150 + i * 5,
                })),
                careerOptions: [
                    {
                        text: '程序员',
                        value: '程序员'
                    },
                    {
                        text: '设计师',
                        value: '设计师'
                    },
                ],

                degreeOptions: [
                    {
                        text: '初中',
                        value: '初中'
                    },
                    {
                        text: '高中',
                        value: '高中'
                    },
                    {
                        text: '中专',
                        value: '中专'
                    },
                    {
                        text: '大专',
                        value: '大专'
                    },
                    {
                        text: '本科',
                        value: '本科'
                    },
                    {
                        text: '硕士',
                        value: '硕士'
                    },
                    {
                        text: '博士',
                        value: '博士'
                    },
                    {
                        text: '博士后',
                        value: '博士后'
                    }
                ],
                showZodiacPicker1: false, // 用于控制个人资料星座选择picker的显示隐藏，初始为隐藏
                showZodiacPicker2: false, // 用于控制择偶条件星座选择picker的显示隐藏，初始为隐藏
                zodiacOptions: [
                    {
                        text: '白羊座',
                        value: '白羊座'
                    },
                    {
                        text: '金牛座',
                        value: '金牛座'
                    },
                    {
                        text: '双子座',
                        value: '双子座'
                    },
                    {
                        text: '巨蟹座',
                        value: '巨蟹座'
                    },
                    {
                        text: '狮子座',
                        value: '狮子座'
                    },
                    {
                        text: '处女座',
                        value: '处女座'
                    },
                    {
                        text: '天秤座',
                        value: '天秤座'
                    },
                    {
                        text: '天蝎座',
                        value: '天蝎座'
                    },
                    {
                        text: '射手座',
                        value: '射手座'
                    },
                    {
                        text: '摩羯座',
                        value: '摩羯座'
                    },
                    {
                        text: '水瓶座',
                        value: '水瓶座'
                    },
                    {
                        text: '双鱼座',
                        value: '双鱼座'
                    }
                ],
                show__2: false,
                show__3: false,
                items__2: [],
                // 车房情况选项
                assetOptions: ['无车无房','有车无房','无车有房','有车有房'],
                // 家庭成员选项
                familyOptions: ['父母','兄弟姐妹','单亲家庭','独生子女','其他'],
            };
        },
        mounted() {
            this.items__2 = this.f.transformProvinceCities(this.provinceCities)
            const userData = this.f.storage('user_data');
            if (userData.datingVip != 0) {
                this.loadUserInfo()
            }
            // this.loadUserInfo()

        },
        methods: {
            // 选择婚史（othInfo）
            chooseOthMarriage() {
                uni.showActionSheet({
                    itemList: ['未婚','已婚','离异','丧偶'],
                    success: (res) => {
                        this.formData.othInfo.marriage = ['未婚','已婚','离异','丧偶'][res.tapIndex];
                    },
                });
            },
            // 选择车房情况（othInfo）
            chooseOthAsset() {
                uni.showActionSheet({
                    itemList: ['无车无房','有车无房','无车有房','有车有房'],
                    success: (res) => {
                        this.formData.othInfo.asset = ['无车无房','有车无房','无车有房','有车有房'][res.tapIndex];
                    },
                });
            },
            // 选择有无小孩（othInfo）
            chooseOthChilds() {
                uni.showActionSheet({
                    itemList: ['有','无'],
                    success: (res) => {
                        this.formData.othInfo.childs = ['有','无'][res.tapIndex];
                    },
                });
            },
            // 选择车房情况
            chooseAsset() {

                uni.showActionSheet({
                    itemList: this.assetOptions,
                    success: (res) => {
                        this.formData.asset = this.assetOptions[res.tapIndex];
                    },
                });
            },
            // 选择家庭成员
            chooseFamily() {
                uni.showActionSheet({
                    itemList: this.familyOptions,
                    success: (res) => {
                        this.formData.family = this.familyOptions[res.tapIndex];
                    },
                });
            },
            // 选择婚史
            chooseMarriage() {
                uni.showActionSheet({
                    itemList: ['未婚','已婚','离异','丧偶'],
                    success: (res) => {
                        this.formData.marriage = ['未婚','已婚','离异','丧偶'][res.tapIndex];
                    },
                });
            },
            // 选择子女情况
            chooseChilds() {
                uni.showActionSheet({
                    itemList: ['有','无'],
                    success: (res) => {
                        this.formData.childs = ['有','无'][res.tapIndex];
                    },
                });
            },
            // 选择犯罪记录史
            chooseCriminal() {
                uni.showActionSheet({
                    itemList: ['无','有'],
                    success: (res) => {
                        this.formData.criminal = ['无','有'][res.tapIndex];
                    },
                });
            },
            // 显示个人资料学历选择picker的方法
            showDegreePicker(i) {
                if (i == 1) {
                    this.showDegreePicker1 = true;
                } else if (i == 2) {
                    this.showDegreePicker2 = true;
                }
            },
            // 隐藏个人资料学历选择picker的方法
            hideDegreePicker(i) {
                if (i == 1) {
                    this.showDegreePicker1 = false;
                } else if (i == 2) {
                    this.showDegreePicker2 = false;
                }
            },
            // 处理个人资料学历选择结果的方法
            handleDegreeChange(e,i) {
                if (i == 1) {
                    this.formData.degree = e.value;
                } else if (i == 2) {
                    this.formData.othInfo.degree = e.value;
                }
            },
            // 显示个人资料星座选择picker的方法
            showZodiacPicker(i) {
                if (i == 1) {
                    this.showZodiacPicker1 = true;
                } else if (i == 2) {
                    this.showZodiacPicker2 = true;
                }
            },
            // 隐藏个人资料星座选择picker的方法
            hideZodiacPicker(i) {
                if (i == 1) {
                    this.showZodiacPicker1 = false;
                } else if (i == 2) {
                    this.showZodiacPicker2 = false;
                }
            },
            // 处理个人资料星座选择结果的方法
            handleZodiacChange(e,i) {
                if (i == 1) {
                    this.formData.zodiac = e.value;
                } else if (i == 2) {
                    this.formData.othInfo.zodiac = e.value;
                }
            },
            // 显示个人资料职业选择picker的方法，参数1表示是个人资料相关场景
            showCareerPicker(i) {
                if (i == 1) {
                    this.showCareerPicker1 = true; // 显示个人资料职业选择的picker
                } else if (i == 2) {
                    this.showCareerPicker2 = true; // 显示择偶条件职业选择的picker（之前已有的逻辑）
                }
            },
            // 隐藏个人资料职业选择picker的方法，参数1表示个人资料相关场景
            hideCareerPicker(i) {
                if (i == 1) {
                    this.showCareerPicker1 = false; // 隐藏个人资料职业选择的picker
                } else if (i == 2) {
                    this.showCareerPicker2 = false; // 隐藏择偶条件职业选择的picker（之前已有的逻辑）
                }
            },
            // 处理个人资料职业选择结果的方法，参数1表示个人资料相关场景
            handleCareerChange(e,i) {
                console.log(e);

                if (i == 1) {
                    this.formData.career = e.value; // 更新个人资料中的职业属性
                } else if (i == 2) {
                    this.formData.othInfo.career = e.value; // 更新择偶条件中的职业属性（之前已有的逻辑）
                }
            },
            loadUserInfo() {
                const userData = this.f.storage('user_data');
                this.$api.req(
                    '/dating/member/get',
                    { userId: userData.userId },
                    'get',
                    'JSON',
                    false
                ).then((res) => {
                    if (res.code === 0) {
                        // this.user = res.data;
                        this.formData = {
                            inviteUserId: res.data.inviteUserId || '',
                            name: res.data.name || '',
                            phone: res.data.myInfo.phone || '',
                            height: res.data.myInfo.height || '',
                            age: res.data.myInfo.age || '',
                            weight: res.data.myInfo.weight || '',
                            cover: res.data.cover || [],
                            sex: res.data.sex || 1,
                            birth: res.data.myInfo.birth || '',
                            career: res.data.myInfo.career || '',
                            degree: res.data.myInfo.degree || '',
                            idCard: res.data.myInfo.idCard || '',
                            zodiac: res.data.myInfo.zodiac || '',
                            description: res.data.myInfo.description || '',
                            address: res.data.myInfo.address || '',
                            income: res.data.myInfo.income || '',
                            asset: res.data.myInfo.asset || '', // 新增字段：车房情况
                            family: res.data.myInfo.family || '', // 新增字段：家庭成员
                            marriage: res.data.myInfo.marriage || '', // 新增字段：婚史
                            childs: res.data.myInfo.childs || '', // 新增字段：有无子女
                            criminal: res.data.myInfo.criminal || '', // 新增字段：犯罪记录史
                            othInfo: {
                                sex: res.data.othInfo.sex || 2,
                                birth: res.data.othInfo.birth || '',
                                birthR: res.data.othInfo.birthR || '',
                                career: res.data.othInfo.career || '',
                                degree: res.data.othInfo.degree || '',
                                zodiac: res.data.othInfo.zodiac || '',
                                address: res.data.othInfo.address || '',
                                income: res.data.othInfo.income || '',
                                incomeR: res.data.othInfo.incomeR || '',
                                height: res.data.othInfo.height || '',
                                heightR: res.data.othInfo.heightR || '',
                                description: res.data.othInfo.description || '',
                                marriage: '', // 新增：婚史
                                asset: '', // 新增：车房情况
                                childs: res.data.othInfo.childs || '', // 新增：有无小孩
                            },
                        };

                    }
                });
            },
            // 校验电话号码格式
            validatePhone() {
                // const phonePattern = /^[1][3-9][0-9]{9}$/;
                // if (!phonePattern.test(this.formData.phone)) {
                //     uni.showToast({ title: '手机号格式不正确',icon: 'none' });
                // }
            },

            // 校验身份证格式
            validateIdCard() {
                // const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}([01]\d)([0-3]\d)\d{3}(\d|X)$/;
                // if (!idCardPattern.test(this.formData.idCard)) {
                //     uni.showToast({ title: '身份证格式不正确',icon: 'none' });
                // }
            },

            // // 选择图片
            // chooseImage() {
            //     this.picture = true
            //     // 上传封面图片
            //     uni.chooseImage({
            //         count: 1,
            //         success: (res) => {
            //             // console.log(res);
            //             // console.log(res.tempFiles[0].path);
            //             console.log(res.tempFiles[0]);

            //             var imgurl = res.tempFiles[0].path
            //             console.log(imgurl);

            //             let userId = this.f.storage('user_data').userId; // 你的 userId，假设你已经在 data 或者其他地方存储
            //             let fileName = res.tempFiles[0].path.split('/').pop();  // 获取文件名
            //             let filePath1 = userId + '/' + fileName;
            //             console.log(filePath1);

            //             uni.uploadFile({
            //                 url: 'https://www.liujianggongyi.site/app-api/infra/file/upload',
            //                 filePath: res.tempFiles[0].path,  // 选中的图片路径
            //                 name: 'file',                    // 上传文件的字段名称
            //                 header: {
            //                     'tenant-id': '1',  // 替换成实际的 tenant-id
            //                     'Authorization': this.f.storage('userToken'),  // 替换成实际的 token
            //                 },
            //                 formData: {
            //                     path: filePath1 // 其他参数
            //                 },
            //                 success: (uploadRes) => {
            //                     let data = JSON.parse(uploadRes.data);  // 解析上传后的响应数据
            //                     if (data.code === 0) {
            //                         // 修复 URL 中的重复部分
            //                         let imageUrl = data.data.replace('//','/');
            //                         this.formData.cover = imageUrl;  // 设置返回的图片链接
            //                     } else {
            //                         uni.showToast({
            //                             title: '上传失败',
            //                             icon: 'none'
            //                         });
            //                     }
            //                 },
            //                 fail: (error) => {
            //                     console.log(error);

            //                     uni.showToast({
            //                         title: '上传出错',
            //                         icon: 'none'
            //                     });
            //                 }
            //             });
            //         }
            //     });
            // },

            // 删除图片
            deleteImage(index) {
                this.formData.cover.splice(index,1);  // 从数组中删除指定索引的图片
            },
            // 使用uniapp自带的预览功能
            previewImage(index) {
                console.log(this.formData.cover[index]);

                uni.previewImage({
                    current: this.formData.cover[index],  // 当前显示的图片
                    urls: this.formData.cover  // 图片组
                });
            },
            // 选择图片
            chooseImage() {
                uni.chooseImage({
                    count: 5, // 这里可以设置最多选择5张图片
                    success: (res) => {
                        const tempFilePaths = res.tempFiles;

                        tempFilePaths.forEach(file => {
                            let fileName = file.path.split('/').pop();  // 获取文件名
                            let userId = this.f.storage('user_data').userId;
                            let filePath = userId + '/' + fileName;  // 在文件名前加上 userId

                            uni.uploadFile({
                                url: cfg.url + '/infra/file/upload',
                                filePath: file.path,  // 选中的图片路径
                                header: {
                                    'tenant-id': '1',  // 替换成实际的 tenant-id
                                    'Authorization': this.f.storage('userToken'),  // 替换成实际的 token
                                },
                                name: 'file',
                                formData: {
                                    path: filePath  // 将新的路径传递给后台
                                },
                                success: (uploadRes) => {
                                    let data = JSON.parse(uploadRes.data);  // 解析上传后的响应数据
                                    if (data.code === 0) {
                                        // let imageUrl = data.data.replace('//','/');
                                        let imageUrl = data.data
                                        // 将上传的图片链接添加到 cover 数组中
                                        this.formData.cover.push(imageUrl);
                                    } else {
                                        uni.showToast({
                                            title: '上传失败',
                                            icon: 'none'
                                        });
                                    }
                                },
                                fail: (error) => {
                                    console.log(error);

                                    uni.showToast({
                                        title: '上传出错',
                                        icon: 'none'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            // 选择性别
            chooseSex() {
                uni.showActionSheet({
                    itemList: ['男','女'],
                    success: (res) => {
                        if (res.tapIndex == 0) {
                            this.formData.sex = 1;
                            this.formData.othInfo.sex = 2
                        } else {
                            this.formData.sex = 2;
                            this.formData.othInfo.sex = 1
                        }
                    },
                });
            },

            // 选择出生日期
            chooseBirth(i) {
                if (i == 1) {
                    this.$refs.dateTime.show();
                } else if (i == 2) {
                    this.$refs.dateTimeoth.show();
                } else if (i == 3) {
                    this.$refs.dateTimeothR.show();
                }
            },

            // 日期选择器变化时
            onDateChange(e) {
                this.formData.birth = e.result;
            },

            onDateChangeothInfo(e) {
                this.formData.othInfo.birth = e.result;
            },

            onDateChangeothInfoR(e) {
                this.formData.othInfo.birthR = e.result;
            },

            // 选择职业
            chooseCareer(i) {
                uni.showActionSheet({
                    itemList: this.careerOptions,
                    success: (res) => {
                        if (i == 1) {
                            this.formData.career = this.careerOptions[res.tapIndex];
                        } else {
                            this.formData.othInfo.career = this.careerOptions[res.tapIndex];
                        }

                    },
                });
            },

            // 选择学历
            chooseDegree(i) {
                uni.showActionSheet({
                    itemList: this.degreeOptions,
                    success: (res) => {
                        if (i == 1) {
                            this.formData.degree = this.degreeOptions[res.tapIndex];
                        } else {
                            this.formData.othInfo.degree = this.degreeOptions[res.tapIndex];
                        }
                    },
                });
            },

            // 选择星座
            chooseZodiac(i) {
                uni.showActionSheet({
                    itemList: this.zodiacOptions,
                    success: (res) => {
                        if (i == 1) {
                            this.formData.zodiac = this.zodiacOptions[res.tapIndex];
                        } else {
                            this.formData.othInfo.zodiac = this.zodiacOptions[res.tapIndex];
                        }
                    },
                });
            },

            // 选择地址
            chooseLocation(i) {
                if (i == 1) {
                    this.show__2 = true
                } else {
                    this.show__3 = true
                }
            },

            // 自己资料省市选择器
            changee(e) {
                this.formData.address = e.result
            },

            // 择偶省市选择器
            changeee(e) {
                this.formData.othInfo.address = e.result
            },

            handleSave() {
                var t = this;

                // 如果是个人信息页面 (current == 0)，先进行表单验证
                if (this.current === 0) {
                    // 校验必填字段
                    if (!this.formData.name || !this.formData.phone || !this.formData.cover || !this.formData.idCard || !this.formData.income || !this.formData.age || !this.formData.weight) {
                        uni.showToast({
                            title: '请填写所有必填项',
                            icon: 'none'
                        });
                        return;
                    }

                    // 校验电话号码格式
                    const phonePattern = /^[1][3-9][0-9]{9}$/;
                    if (!phonePattern.test(this.formData.phone)) {
                        uni.showToast({ title: '手机号格式不正确',icon: 'none' });
                        return;
                    }

                    // 校验身份证格式
                    const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}([01]\d)([0-3]\d)\d{3}(\d|X)$/;
                    if (!idCardPattern.test(this.formData.idCard)) {
                        uni.showToast({ title: '身份证格式不正确',icon: 'none' });
                        return;
                    }

                    // 如果验证通过，切换到下一步
                    this.current = 1;
                }
                // 如果是择偶条件页面 (current == 1)，进行范围验证后执行保存操作
                else if (this.current === 1) {
                    // 验证身高范围
                    if (this.formData.othInfo.height && this.formData.othInfo.heightR && 
                        parseInt(this.formData.othInfo.height) >= parseInt(this.formData.othInfo.heightR)) {
                        uni.showToast({
                            title: '最小身高必须小于最大身高',
                            icon: 'none'
                        });
                        return;
                    }
                    
                    // 验证出生日期范围
                    if (this.formData.othInfo.birth && this.formData.othInfo.birthR && 
                        new Date(this.formData.othInfo.birth) >= new Date(this.formData.othInfo.birthR)) {
                        uni.showToast({
                            title: '最低出生日期必须早于最高出生日期',
                            icon: 'none'
                        });
                        return;
                    }
                    
                    // 验证月收入范围
                    if (this.formData.othInfo.income && this.formData.othInfo.incomeR && 
                        parseInt(this.formData.othInfo.income) >= parseInt(this.formData.othInfo.incomeR)) {
                        uni.showToast({
                            title: '最低月收入必须低于最高月收入',
                            icon: 'none'
                        });
                        return;
                    }
                    var obj = this.f.jj(this.formData)
                    t.$api.req(`/dating/member/create`,
                        obj,
                        'POST','JSON',false).then(res1 => {
                            if (res1.data) {
                                // 这里可以处理保存后的逻辑，例如跳转页面等
                                uni.showToast({
                                    title: '保存成功',
                                    icon: 'success'
                                });
                                this.f.nav("/subPackage1/marriageMember/marriageMember")
                            }
                        });
                }
            },

            // handleSave() {
            //     this.current = 1
            //     var t = this
            //     // 校验必填字段
            //     if (!this.formData.name || !this.formData.phone || !this.formData.cover || !this.formData.idCard || !this.formData.income) {
            //         uni.showToast({
            //             title: '请填写所有必填项',
            //             icon: 'none'
            //         });
            //         return;
            //     }

            //     // 校验电话号码格式
            //     const phonePattern = /^[1][3-9][0-9]{9}$/;
            //     if (!phonePattern.test(this.formData.phone)) {
            //         uni.showToast({ title: '手机号格式不正确',icon: 'none' });
            //         return;
            //     }

            //     // 校验身份证格式
            //     const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}([01]\d)([0-3]\d)\d{3}(\d|X)$/;
            //     if (!idCardPattern.test(this.formData.idCard)) {
            //         uni.showToast({ title: '身份证格式不正确',icon: 'none' });
            //         return;
            //     }
            //     t.$api.req(`/dating/member/create`,
            //         this.formData,
            //         'POST',"form",false).then(res1 => {
            //             if (res1.data) {
            //             }
            //         });
            // },

            // 身高选择器
            chooseHeight(i) {
                if (i == 1) {
                    this.show = true
                } else {
                    this.show2 = true
                }

            },

            sectionChange(e) {
                this.current = e.target.current
            },

            // 上一步按钮操作
            last() {
                this.current = 0
            },
            change(e) {
                this.formData.othInfo.height = e.value
            },
            change2(e) {
                this.formData.othInfo.heightR = e.value
            }
        },
    };
</script>
<style lang="scss" scoped>
    .container {
        padding: 20rpx;
        /* background: linear-gradient(135deg, #f0f2f5, #dfe3e8); */
        min-height: 100vh;
    }

    .content {
        padding-bottom: 100rpx;
    }

    .title {
        font-size: 32rpx;
        text-align: center;
        color: #333;
        margin-top: 20rpx;
    }

    .subtitle {
        font-size: 22rpx;
        text-align: center;
        color: #777;
        margin-top: 10rpx;
    }

    .card {
        background-color: white;
        border-radius: 10rpx;
        padding: 20rpx;
        padding-bottom: 20px;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
        margin-top: 40rpx;
    }

    .input-group {
        margin-bottom: 30rpx;
    }

    .input-label {
        font-size: 24rpx;
        color: #555;
    }

    .required {
        color: red;
    }

    .input,
    .select-box {
        /* width: 100%; */
        padding: 20rpx;
        border: 1rpx solid #ccc;
        border-radius: 8rpx;
        font-size: 24rpx;
        margin-top: 10rpx;
    }

    .select-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .upload-box {
        width: 100%;
        min-height: 200rpx;
        background-color: #f7f7f7;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10rpx;
        padding: 20rpx;
    }

    .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .upload-text {
        color: #888;
        font-size: 28rpx;
    }

    .footer {
        text-align: center;
        margin-top: 40rpx;
    }

    .save-button {
        background-color: #a55fee;
        color: white;
        border: none;
        /* padding: 20rpx 50rpx; */
        border-radius: 30rpx;
        font-size: 30rpx;
    }

    .swiper {
        height: 85vh;
    }


    /* 我的相册弹窗 */
    .picture_box {
        width: 100vw;
        height: 100%;
        background: #fafbff;
    }

    .picture_box_box {
        width: 95%;
        /* height: 100%; */
        margin: 0 auto;
        padding-top: 10px;
        position: relative;
    }

    .picture_box_box>p {
        text-align: left;
        font-size: 13px;
        margin-top: 12px;
    }

    .uploading {
        width: 100%;
        height: 500px;
        margin-top: 30px;
    }

    .uploading_box {
        width: 100px;
        height: 100px;
        border-radius: 5px;
    }

    .rzzx {
        width: 100%;
        /* height: 500px; */
        background: #fff;
        margin-top: 20px;
        border-radius: 15px 15px;
    }

    .image-upload {
        width: 100%;
        margin-top: 10rpx;
    }

    .upload-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10rpx;
        padding: 20rpx;
        background-color: #f7f7f7;
        border-radius: 8rpx;
        min-height: 200rpx;
    }

    .image-row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* 保证图片换行 */
        /* justify-content: center; */
        /* 使得每张图片都分布在行内 */
        gap: 15rpx;
        justify-content: flex-start;
    }

    .image-item {
        position: relative;
        width: 30%;
        /* 设为30%，一行最多三个 */
        height: 150rpx;
        /* 设置固定高度 */
        border-radius: 8rpx;
        overflow: hidden;
        background-color: #f7f7f7;
    }

    .disabled-box {
        pointer-events: none;
        /* 禁止点击 */
        background-color: #ebebeb;
        /* 更深的灰色背景 */
        color: #aaaaaa;
        /* 文本颜色更淡 */
        /* border: 2rpx dashed #999; */
        /* 显眼的虚线边框 */
        position: relative;
        display: flex;
        align-items: center;
    }

    .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8rpx;
    }

    .delete-icon {
        position: absolute;
        top: 5rpx;
        right: 5rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5rpx 10rpx;
        font-size: 20rpx;
        border-radius: 10rpx;
        cursor: pointer;
    }

    .upload-text {
        font-size: 48rpx;
        color: #888;
        text-align: center;
        line-height: 120rpx;
    }

    .add-image {
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8rpx;
        cursor: pointer;
    }
</style>